<template>
	<view class="login-container">
		<!-- 登录表单卡片 -->
		<view class="auth-card">
			<!-- 头部标题 -->
			<view class="auth-header">
				<text class="title">用户登录</text>
				<text class="subtitle">Welcome Back</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-wrapper">
				<!-- 用户名输入 -->
				<view class="input-group" :class="{ error: usernameError }">
					<uni-icons class="input-icon" type="person" size="20" color="#666"></uni-icons>
					<input v-model="username" class="form-input" type="text" placeholder="请输入用户名"
						placeholder-class="placeholder" @focus="clearError('username')" />
					<view v-if="usernameError" class="error-message">{{ usernameError }}</view>
				</view>

				<!-- 密码输入 -->
				<view class="input-group" :class="{ error: passwordError }">
					<uni-icons class="input-icon" type="locked" size="20" color="#666"></uni-icons>
					<input v-model="password" class="form-input" type="password" placeholder="请输入密码"
						placeholder-class="placeholder" @focus="clearError('password')" />
					<view v-if="passwordError" class="error-message">{{ passwordError }}</view>
				</view>

				<!-- 操作按钮 -->
				<button class="login-btn" :class="{ loading: isLoading }" :disabled="isLoading" @click="handleLogin">
					<template v-if="!isLoading">
						<uni-icons type="arrow-right" size="18" color="#fff"></uni-icons>
						<text>立即登录</text>
					</template>
					<template v-else>
						<view class="loading-icon"></view>
						<text>登录中...</text>
					</template>
				</button>

				<!-- 辅助操作 -->
				<view class="auth-actions">
					<text class="action-link" @click="navigateToRegister">注册新账号</text>
					<!-- <text class="action-link" @click="wxLogin">一键登录</text> -->
					<!-- 					<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN"
						@click="getUserInfo">授权微信</button> -->
					<!-- <WxLoginBtn></WxLoginBtn> -->
					<!-- <text class="action-link" @click="navigateToForget">忘记密码?</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		Authlogin
	} from '../../request/api.js'
	// import WxLoginBtn from '../../components/WxLoginBtn.vue'
	const username = ref('')
	const password = ref('')
	const isLoading = ref(false)
	const errorMessage = ref('')

	// 输入验证
	const usernameError = computed(() => {
		if (!username.value) return '用户名不能为空'
		// if (username.value.length < 4) return '用户名至少4个字符'
		return ''
	})

	const passwordError = computed(() => {
		if (!password.value) return '密码不能为空'
		// if (password.value.length < 6) return '密码至少6个字符'
		return ''
	})

	const clearError = (field) => {
		if (field === 'username') errorMessage.value = ''
	}

	const validateForm = () => {
		return !usernameError.value && !passwordError.value
	}

	// 登录处理
	const handleLogin = async () => {
		if (!validateForm()) return

		try {
			isLoading.value = true
			const res = await Authlogin({
				username: username.value,
				password: password.value
			})

			if (res.success) {
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				if (res.role === 'student') {
					uni.switchTab({
						url: '/pages/home/index'
					})
				} else {
					uni.redirectTo({
						url: '/pages/work/index'
					})
				}
			} else {
				errorMessage.value = res.message || '登录失败，请检查凭证'
			}
		} catch (err) {
			errorMessage.value = '网络请求失败，请稍后重试'
		} finally {
			isLoading.value = false
		}
	}

	// 导航方法
	const navigateToRegister = () => {
		uni.navigateTo({
			url: '/pages/register/index'
		})
	}

	const wxLogin = () => {

	}

	const navigateToForget = () => {
		uni.navigateTo({
			url: '/pages/forget-password/index'
		})
	}

	function getUserInfo() {
		uni.getUserProfile({
			lang: 'zh_CN',
			desc: '登录',
			success: infoRes => {
				// this.userInfo = infoRes.userInfo; //用户信息，微信头像，昵称等等
				console.log(infoRes.userInfo)
				uni.login({
					success(res) {
						console.log(res.code, 'codeddd') //获取到的code
					}
				})
			},
			fail(res) {
				uni.showToast({
					title: '登录授权失败',
					icon: 'none',
				})
			}
		});
	}
</script>

<style scoped>
	/* 设计系统变量 */
	:root {
		--primary: #007aff;
		--primary-hover: #0062cc;
		--error: #ff3b30;
		--text-primary: #2d3436;
		--text-secondary: #636e72;
		--border-color: #dfe6e9;
		--bg-color: #f8f9fa;
	}

	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		padding: 20px;
	}

	.auth-card {
		background: #fff;
		border-radius: 16px;
		width: 100%;
		max-width: 400px;
		padding: 32px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	}

	.auth-header {
		text-align: center;
		margin-bottom: 32px;
	}

	.title {
		display: block;
		font-size: 24px;
		font-weight: 600;
		color: var(--text-primary);
		margin-bottom: 8px;
	}

	.subtitle {
		font-size: 14px;
		color: var(--text-secondary);
	}

	.form-wrapper {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.input-group {
		position: relative;
	}

	.form-input {
		/* width: 100%; */
		height: 48px;
		padding: 0 40px;
		border: 2px solid var(--border-color);
		border-radius: 8px;
		font-size: 16px;
		transition: border-color 0.3s ease;
	}

	.form-input:focus {
		border-color: var(--primary);
	}

	.input-icon {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
	}

	.error .form-input {
		border-color: var(--error);
	}

	.error-message {
		color: var(--error);
		font-size: 12px;
		margin-top: 4px;
		padding-left: 40px;
	}

	.login-btn {
		height: 48px;
		background: var(--primary);
		color: #fff;
		border-radius: 8px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		transition: all 0.3s ease;
	}

	.login-btn:active {
		background: var(--primary-hover);
		transform: translateY(1px);
	}

	.login-btn.loading {
		background: #a0a0a0;
		pointer-events: none;
	}

	.loading-icon {
		width: 18px;
		height: 18px;
		border: 2px solid #fff;
		border-top-color: transparent;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.auth-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 16px;
	}

	.action-link {
		color: var(--text-secondary);
		font-size: 12px;
		text-decoration: underline;
	}

	.action-link:active {
		color: var(--primary);
	}

	.placeholder {
		color: #b2bec3;
	}
</style>